<!DOCTYPE html>
<html>

<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'user.label', default: 'user')}"/>
    <asset:stylesheet src="ztree/demo.css"/>
    <asset:stylesheet src="ztree/zTreeStyle.css/"/>
    <asset:javascript src="ztree/jquery.ztree.core.js/"/>
    <title>新建用户</title>
    <style>
        .ztree li span.button.ico_open,.ztree li span.button.ico_close{
            display: none;
        }
    </style>
    <script type="text/javascript">

        var setting = {
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick
            }
        };

        // 初始化数据
        initAccount();

        // 初始化数据
        function initAccount(name) {
            $.ajax({
                type: "post",
                url: "/dataMigration/getAllAccountList",
                data:{
                    name: name
                },
                success: function (data) {
                    if (data.status == "success") {
                        $(".ztree li span.button.ico_open").hide();
                        var accountList = data.accountList
                        $(document).ready(function(){
                            $.fn.zTree.init($("#treeDemo"), setting, accountList);
                            expandAll("treeDemo");
                            var list = $('#treeDemo').children().children('ul');
                            list.css('paddingLeft','27px');
                            if(list.children().children('ul')){
                                list = list.children().children('ul');
                                list.css('paddingLeft','27px');
                                callbackUl(list);
                            }
                            function callbackUl (ul) {
                                if(ul.length != 0){
                                    ul = ul.children().children('ul');
                                    ul.css('paddingLeft', '27px');
                                    callbackUl(ul)
                                }else{
                                    return;
                                }
                            }
                            $(".attrClass:even").removeClass("fa-folder-o").removeClass("fa");
                            $(".attrClass:even").removeClass("fa-folder-open-o").removeClass("fa");
                        });
                    }
                },
                error: function () {
                    console.log("获取失败，请稍后重试");
                },
            });
        }

        function expandAll(treeId) {
           var zTree = $.fn.zTree.getZTreeObj(treeId);
           zTree.expandAll(true);
       }

        function onClick(e, treeId, treeNode) {
            $("#account").val(treeNode.id);
            $("#accountName").val(treeNode.name);
            $("#close").click();
        }
    </script>
</head>

<body class="fixed-navbar fixed-sidebar">
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li>
                        <g:link controller="user" action="index">用户管理</g:link>
                    </li>
                    <li class="active">
                        <span>新增用户</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                新增用户
            </h2>
        </div>
    </div>
</div>

<div class="content animate-panel">
    <div class="row">
        <div class="hpanel hblue">
            <div class="panel-heading">
                新增用户
            </div>

            <div class="panel-body">
                <g:form action="save" class="form-horizontal createForm">
                    <g:if test="${flash.message}">
                        <div class="message alert alert-info" role="status">${flash.message}</div>
                    </g:if>
                    <g:hasErrors bean="${this.user}">
                        <ul class="errors" role="alert">
                            <g:eachError bean="${this.user}" var="error">
                                <li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>>
                                    <g:message error="${error}"/>
                                </li>
                            </g:eachError>
                        </ul>
                    </g:hasErrors>

                    <div class="form-group">
                        <label class="col-md-2 control-label is-required">用户名</label>
                        <div class="col-md-3">
                            <g:textField class="form-control" type="text" name="username" value="${this.user?.username}" id="username"/>
                        </div>

                        <label class="col-md-2 control-label is-required">密码</label>
                        <div class="col-md-3">
                            <g:textField class="form-control" type="password" name="password" id="password"/>
                        </div>
                    </div>
                 
                    <div class="hr-line-dashed"></div>

                    <div class="form-group">
                        <label class="col-md-2 control-label is-required">姓名</label>
                        <div class="col-md-3">
                            <g:textField class="form-control" type="text" value="${this.user?.fullName}" name="fullName" id="fullName"/>
                        </div>

                        <label class="col-md-2 control-label is-required">确认密码</label>
                        <div class="col-md-3">
                            <g:textField class="form-control" type="password" name="newPassword" id="newPassword"/>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">联系电话</label>
                        <div class="col-md-3">
                            <g:textField class="form-control" type="text" value="${this.user?.cellphone}" name="cellphone" id="cellphone"/>
                        </div>

                        <label class="col-md-2 control-label">电子邮件</label>
                        <div class="col-md-3">
                            <g:textField class="form-control" type="text" value="${this.user?.email}" name="email" id="email"/>
                        </div>
                    </div>
                    
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-md-2 control-label is-required">用户状态</label>
                        <div class="col-md-3">
                            <g:select class="form-control m-b" name="enabled" id="enabled" from="${[[name:'正常',value:true],[name:'禁用',value:false]]}" optionValue="name" optionKey="value" value="${this.user?.enabled}"/>
                        </div>

                        <label class="col-md-2 control-label">账号有效期</label>
                        <div class="col-md-3">
                            <g:datePicker class="form-control" name="expiredDate" value="${this.user?.expiredDate}" default="${new Date().plus(15)}"/>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">所属机构</label>
                        <div class="col-md-3">
                            <g:select class="form-control m-b hide" name="account" id="account" from="${com.cindata.Account.list()}" optionValue="name" optionKey="id" value="${this.user?.account?.id}"/>
                            <input class="form-control" type="text" value="${this.user?.account?.name}" name="accountName" id="accountName" readonly/>
                        </div>


                        <label class="col-md-2 control-label is-required">所属部门</label>
                        <div class="col-md-3">
                            <g:select class="form-control m-b" name="department" id="department" from="${com.cindata.Department.list()}" optionValue="name" optionKey="id" value="${this.user?.department?.id}" noSelection="${['': '请选择所属部门']}"/>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-md-2 control-label is-required">开通权限</label>
                        <div class="col-md-3">
                            <g:select class="js-source-states-2" multiple="multiple" style="width:100%;" name="roleList" id="roleList" from="${com.cindata.Role.list()}" optionKey="id" optionValue="name"  value=""/>
                        </div>
                        <label class="col-md-2 control-label">主题色</label>
                        <div class="col-md-3">
                            <g:select class="form-control m-b" name="skin" id="skin" from="${[[name: '浅色',value: 0],[name: '深色',value: 1]]}" optionValue="name" optionKey="value" value="${this.user?.skin}" noSelection="${['': '请选择主题色']}"/>
                        </div>
                    </div>

                    <a class="btn btn-xs btn-primary btn-outline hide" href="#myModal" data-toggle="modal" id="showAccountList"></a>

                    <div class="hr-line-dashed"></div>

                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-6">
                            <g:submitButton class="btn btn-info" name="create" value="保存"/>
                        </div>
                    </div>
                </g:form>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {

        $("#accountName").click(function() {
            $("#showAccountList").click();
        })

        $.validator.addMethod("isMobilOrPhone", function(value,element) {
            var mobile = /^(13|15|18)\d{9}$/;
            var tel =  /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/;
            return this.optional(element) || (tel.test(value) || mobile.test(value));
        }, "请正确填写您的联系电话");
        $.validator.addMethod("checkEmail", function(value,element) {
            var mobile = /^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i
            return this.optional(element) ||  mobile.test(value);
        }, "请正确填写您的邮箱(不区分大小写)");
        $(".createForm").validate({
            rules:{
                username:{
                    required:true,
                },
                fullName:{
                    required:true,
                },
                cellphone:{
                    isMobilOrPhone : true
                },
                email:{
                    checkEmail: true
                },
                password:{
                    required:true,
                },
                newPassword:{
                    required:true,
                    equalTo:"#password"
                },
                roleList:{
                    required:true,
                }
            },
            messages:{
                username:{
                    required:"请输入登录名",
                },
                fullName:{
                    required:"请输入用户名",
                },
                cellphone:{
                    required:"请输入一个正确的联系电话"
                },
                email:{
                    required: "请输入一个正确的邮箱"
                },
                password:{
                    required:"请输入新密码",
                },
                newPassword:{
                    required:"请输入确认密码",
                    equalTo:"两次密码不一致"
                },
                roleList:{
                    required:"请选择开通权限",
                }
            }
        });
    })
</script>
<asset:javascript src="homer/vendor/jquery-validation/jquery.validate.min.js"/>


%{--添加机构弹窗--}%
<div class="content animate-panel p-b-n">
    <div class="row">
        <div class="hpanel">
            <div class="modal fade hmodal-info" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="color-line"></div>
                        <div class="modal-header">
                            <h4 class="modal-title"><span id="title">所属机构</span></h4>
                        </div>

                        <div class="modal-body form-horizontal">
                            <div class="form-group">
                                <div id="menuContent" class="menuContent">
                                    <ul id="treeDemo" class="ztree"></ul>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default hide" id="close" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary hide" id="confirm">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
